<%--
  Created by IntelliJ IDEA.
  User: 世界上最帅的詹姆斯
  Date: 2021-01-14
  Time: 16:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"
            +request.getServerName()+":"+request.getServerPort()
            +request.getContextPath()+"/";
%>
<%--娱乐类型表--%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-row" id="zq_formpopbox" style="display:none;position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;">
    <div class="layui-col-md11">
        <form id="zq_form" class="layui-form" action="" style="margin-top: 20px;align:center;">
            <%--隐藏字段id,区分添加和修改--%>
            <input type="hidden" name="id"/>
            <%--lay-verify验证的值：
             required（必填项）,phone（手机号）,email（邮箱）
             url（网址）,number（数字）,date（日期）,identity（身份证）
             自定义值--%>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="zq_submit" <%--onclick="zq_submit()"--%>>确认</button>
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<br>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'laypage', 'laydate','jquery'], function(){
        var table = layui.table //表格
            ,layer = layui.layer //弹层
            ,form = layui.form //form表单
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate;//日期
        var $=layui.jquery;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 350
            ,url: '../../basic/findEntertainment' //数据接口
            ,toolbar: 'default'
            ,page:{
                layout: [ 'prev', 'page', 'next', 'count','limit', 'refresh', 'skip']//自定义布局顺序
                ,limit:5	//初始  每页几条数据
                ,limits:[5,10,15]	//可以选择的 每页几条数据
                ,groups:10 	//最多几个跳页按钮
                ,first: false //不显示首页
                ,last: false //不显示尾页
            } //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:590, sort: true, fixed: 'left'}
                ,{field: 'ename', title: '娱乐类型', width:550}
                ,{fixed: 'right', title:'操作',width:190, align:'left', toolbar: '#barDemo'}
            ]]
            ,id:'tableid'
        });
        //为工具条添加监听
        table.on('toolbar(test)',function(obj){
          var checkStatus=  table.checkStatus(obj.config.id)
            ,data=checkStatus.data;//获取选中的数据
            switch (obj.event) {
                case 'add':
                   adddetail();
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length==0){
                        layer.msg('请选择行')
                    }else if (data.length>1){
                        layer.msg('只能修改一行数据');
                    }else {
                        updatedetail(checkStatus.data[0])
                        layer.msg('编辑[id]:'+checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行或者多行');
                    } else {
                        deleteDetail();
                    }
                    break;
            };
        });

        //这里括号里对应table设置的lay-filter属性！！
        table.on('tool(test)', function(obj){
            //获取当前行数据
            var data = obj.data;
            //获取event对应的值
            var event =obj.event;
            //获取当前行的dom对象
            var tr=obj.tr;
            if(event === 'detail'){		//如果点击了查看按钮
                //执行查看详情的方法
              updatedetail(data)
            } else if(event === 'del'){	//如果点击了删除按钮
                deleteDetail();
            }
            else if(event === 'edit'){	//如果点击了修改按钮

                //执行修改方法
                updatedetail(data)
            }
        });
        //删除的方法
        function deleteDetail() {
            layer.confirm("您确定删除所选择行吗?",{icon:3,title:'询问'},function (index) {
                var data=table.checkStatus('tableid');//获取选中表格中lay-filter的值
                if (data.data.length!=0){
                    //表示选中了数据声明一个存放需要删除的数组
                    var arr=[];
                    for (var i=0;i<data.data.length;i++){
                        arr.push(data.data[i].id);
                    }
                    console.log(arr);
                    $.post('../../basic/deleteEntertainment',{'ids':arr},function (data) {
                        if (data === false) {
                            layer.msg('删除失败！', {
                                icon : 5,
                                offset : "auto",
                                time : 2000
                            });//提示框
                        } else if (data===true){
                            layer.msg('删除成功！', {
                                icon : 6,
                                offset : "auto",
                                time : 2000
                            });//提示框
                            window.location.reload();
                        }
                    },'json')
                }
            })
        }
    });

</script>
<!-- 操作按钮 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">

    //添加的方法
    function adddetail(){

        layer.open({
            //弹出层标题
            title:'添加娱乐类型',
            //弹出层类型
            type:2,
            //取值
            content:'entertainment/addentertainment.jsp',
            //设置坐标
            offset:['30px','220px'],
            //设置宽和高
            area: ['400px', '500px'],
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            //透明度 和 被遮盖层颜色
            shade: [0.8,'#393f49'],
            //渐显动画
            anim: 0,

        })
    }
    //修改的方法
    function updatedetail(data){

        layer.open({
            //弹出层标题
            title:'添加娱乐类型',
            //弹出层类型
            type:2,
            //取值
            content:'<%=basePath%>basic/findEn?id='+data.id,
            //设置坐标
            offset:['30px','220px'],
            //设置宽和高
            area: ['400px', '500px'],
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            //透明度 和 被遮盖层颜色
            shade: [0.8,'#393f49'],
            //渐显动画
            anim: 0,
        })
    }

</script>
</body>
</html>


